<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
        body{
            background: #ffffff;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
            font-weight: 400;
            margin: 0;
            padding: 0;
            line-height: 1.5;
            font-size: 14px;
        }
        .cm-grids-head,
        .cm-grids-body{
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            text-align: left;
            border-radius: 4px 4px 0 0;
        }
        .cm-grids-head-wrap{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
            padding-right: 17px;
            background: #f7f7f7;
        }
        .cm-grids-head thead th,
        .cm-grids-body thead th{
            background: #f7f7f7;
            border-right: 1px solid #e9e9e9;
            padding: 8px;
            word-break: break-all;
            position: relative;
            font-weight: 500;
        }
        .cm-grids-head{

        }
        .cm-grids-head-wrap .cm-grids-head-scroll-place{
        }
        .cm-grids-body thead{
            display: none;
        }
        .cm-grids-body tbody td{
            border-right: 1px solid #e9e9e9;
            padding: 8px;
            word-break: break-all;
            border-bottom: 1px solid #e9e9e9;
        }
        .cm-grids-wrap{
            margin: 50px;
            width: 500px;
            height: 200px;
            position: relative;
            border: 1px solid #e9e9e9;
        }
        .cm-grids-body-wrap{
            position: absolute;
            left: 0;
            top: 37px;
            bottom: 0;
            right: 0;
            overflow: auto;
        }
        .cm-grids-cell-tools{
            display: block;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
        }
        .cm-grids-resize{
            display: inline-block;
            width: 3px;
            height: 100%;
            cursor: col-resize;
            float: right;
        }
        .cm-grids-sorting{
            display: inline-block;
            background: url(./angle-down.png) center center no-repeat;
            width: 10px;
            cursor: pointer;
            margin-left: 3px;
        }
    </style>
</head>
<body>

<div class="cm-grids-wrap">
    <div class="cm-grids-head-wrap">
        <table class="cm-grids-head">
            <colgroup>
                <col style="width: 20%;">
                <col id="th-col" style="width: 20%;">
                <col style="width: 20%;">
                <col style="width: 40%;">
                <col style="width: 20%;">
            </colgroup>
            <thead>
                <tr>
                    <th>AAAA</th>
                    <th><span>B<span class="cm-grids-sorting">&nbsp;</span></span>
                        <span class="cm-grids-resize"></span>
                    </th>
                    <th>C</th>
                    <th>D</th>
                    <th>E</th>
                </tr>
            </thead>
        </table>
        <div class="cm-grids-head-scroll-place"></div>
    </div>
    <div class="cm-grids-body-wrap">
        <table class="cm-grids-body">
            <colgroup>
                <col style="width: 20%;">
                <col style="width: 20%;">
                <col style="width: 20%;">
                <col style="width: 70px;">
                <col style="width: 20%;">
            </colgroup>
            <tbody>
                <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
            </tbody>
        </table>
    </div>
</div>



<input type="range" min="50" max="150" onchange="setWidth(this)">

<script>
    function setWidth(ele){
        console.log(ele.value);
        document.getElementsByTagName("col")[1].style.width = ele.value+"px";
        document.getElementsByTagName("col")[6].style.width = ele.value+"px";
    }
</script>

</body>
</html>